<template>
  <Row>
    <Col :xs="16">
      <div class="page-gird-container" style="display: flex; padding-left: 0">
        <div class="info">
          <Avatar icon="ios-person" style="width: 60px; height: 60px" />
          <p style="margin: 15px 0 5px">
            <Icon type="ios-mail-outline" />
            <Icon type="md-tablet-portrait" style="color: #08f" />
            <Icon
              type="md-checkbox-outline"
              style="margin-right: 0; color: #08f"
            />
          </p>
          <p style="margin-bottom: 4px">Hi, {{ data.name }}</p>
          <p>
            <a style="margin-right: 8px" @click="toAccountSecurity">账号中心</a>
            <a @click="toRealName">认证</a>
          </p>
        </div>
        <div class="account-right">
          <h3 style="font-weight: 400; font-size: 18px">
            {{ data.name }}
          </h3>
          <ul class="account-right-main">
            <li style="padding-right: 10px">
              <router-link to="/" class="account-right-main-li">
                <p>可用余额（元）</p>
                <h3>{{ data.balance }}</h3>
              </router-link>
              <div class="fast-links-tag">
                <a @click="toRecharge('online')">在线充值</a>
                <a @click="toRecharge('inline')">线下汇款</a>
                <span>
                  <router-link to="">授信账单</router-link>
                  <a href="#">余额预警</a>
                </span>
              </div>
            </li>
            <li>
              <router-link to="" class="account-right-main-li">
                <p>代金券（元）</p>
                <h3>0</h3>
              </router-link>
              <a href="#">在线兑换</a>
            </li>
            <li style="border-right: none">
              <router-link to="" class="account-right-main-li">
                <p>可开票（元）</p>
                <h3>0</h3>
              </router-link>
              <div class="fast-links-tag">
                <router-link to="">申请发票</router-link>
                <router-link to="">合同</router-link>
                <router-link to="">地址管理</router-link>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="page-gird-container overallData">
        <h2 class="title">我的整体数据</h2>
        <ul class="overallData-tabs">
          <li
            v-for="(item, index) in tabs"
            :key="item + index"
            :class="{ current: current === index }"
            @click="active(index)"
          >
            <p>{{ item.title }}</p>
            <p>{{ item.data }}</p>
          </li>
        </ul>
        <div v-if="current == 0" id="echartOne" style="width: 100%; height: 300px">
        </div>
        <div
          v-if="current == 1"
          id="echartTwo"
          style="width: 100%; height: 300px"
        ></div>
        <div
          v-if="current == 2"
          id="echartThree"
          style="width: 100%; height: 300px"
        ></div>
      </div>
      <div class="page-gird-container problem">
        <h2 class="title">
          常见问题
          <router-link to="">更多</router-link>
        </h2>
        <Row>
          <Col
            v-for="(item, index) in problem"
            :key="item + index"
            :md="12"
            :xxl="8"
          >
            <router-link to="">
              <span class="problem-tag">{{ item.title }}</span>
              <span class="problem-text">{{ item.text }}</span>
            </router-link>
          </Col>
        </Row>
      </div>
    </Col>
    <Col :xs="8" style="padding-left: 12px; padding-right: 12px">
      <div class="page-gird-container">
        <h2 class="title">
          官方活动营销
          <router-link to="">查看更多</router-link>
        </h2>
        <div class="activity" style="margin-bottom: 24px">
          <div class="act-l-title">
            <div class="act-l-title-inside">2023年中云聚惠</div>
          </div>
          <div class="act-r-title">
            <h3>
              <router-link to="" class="router-link-active">
                <span class="m-r-sm">2023年中云聚惠</span>
                <Tag style="background-color: rgb(204, 204, 204)">未参与</Tag>
              </router-link>
            </h3>
            <p style="color: #a3a3a3">
              2023-06-06 11:00:00至2023-07-26 10:00:00
            </p>
          </div>
        </div>
        <div class="activity">
          <div class="act-l-title">
            <div class="act-l-title-inside">2022年终狂欢季活动</div>
          </div>
          <div class="act-r-title">
            <h3>
              <router-link to="" class="router-link-active">
                <span class="m-r-sm">2022年终狂欢季活动</span>
                <Tag style="background-color: rgb(204, 204, 204)">未参与</Tag>
              </router-link>
            </h3>
            <p style="color: #a3a3a3">
              2023-06-06 11:00:00至2023-07-26 10:00:00
            </p>
          </div>
        </div>
      </div>
      <div class="page-gird-container" style="margin-top: 24px">
        <h2 class="title">
          官方公告
          <router-link to="">查看更多</router-link>
        </h2>
        <ul>
          <li
            class="official-announcements"
            v-for="(item, index) in announcement"
            :key="item + index"
          >
            <router-link to="">【活动】{{ item.activity }}</router-link>
            <span style="color: #a3a3a3">{{ item.date }}</span>
          </li>
        </ul>
      </div>
      <div class="page-gird-container" style="margin-top: 24px">
        <h2 class="title">快捷帮助入口</h2>
        <ul class="shortcut">
          <li>
            <router-link to="">账号管理</router-link>
          </li>
          <li>
            <router-link to="">提交工单</router-link>
          </li>
          <li>
            <router-link to="">帮助文档</router-link>
          </li>
        </ul>
      </div>
    </Col>
  </Row>
</template>

<script>
    import cookies from "@/libs/util.cookies";
    import { homeEntirety, chartsHomeBusiness, chartsHomeConsumption, chartsHomeTopUp } from "@/api/dashboard";
    import { memberInfo } from '@/api/set'

    export default {
        name: "dashboard-console",
        data() {
            return {
                data: {},
                tabs: [
                    {
                        title: "消费金额（元）",
                        data: 0,
                    },
                    {
                        title: "充值金额（元）",
                        data: 0,
                    },
                    {
                        title: "新增业务数",
                        data: 0,
                    },
                ],
                problem: [
                    {
                        title: "API问题",
                        text: "各线路测试IP",
                    },
                    {
                        title: "平台规则",
                        text: "为什么申请资源池API需要充值?",
                    },
                    {
                        title: "财务问题",
                        text: "授信账单",
                    },
                    {
                        title: "财务问题",
                        text: "推广功能使用说明",
                    },
                    {
                        title: "备案问题",
                        text: "合作商客户备案幕布怎么处理？",
                    },
                    {
                        title: "财务问题",
                        text: "如何添加单页？",
                    },
                    {
                        title: "财务问题",
                        text: "如何添加自定义短信接口",
                    },
                    {
                        title: "财务问题",
                        text: "系统盘赠送大小说明",
                    },
                    {
                        title: "API问题",
                        text: "购买云服务器的价格保护说明",
                    },
                ],
                announcement: [
                    {
                        activity: "裸金属秦皇岛BGP线路割接通知",
                        date: "2023-07-26 18:34:55",
                    },
                    {
                        activity: "“2023年中云聚惠活动”关闭通知",
                        date: "2023-07-25 10:31:10",
                    },
                    {
                        activity: "关于裸金属温州线路价格调整通知",
                        date: "2023-06-14 17:13:28",
                    },
                    {
                        activity: "关于中国大连网络维护的通知",
                        date: "2023-06-08 14:37:19",
                    },
                    {
                        activity: "“2023年中云聚惠活动”开启通知",
                        date: "2023-06-06 14:00:00",
                    },
                ],
                current: 0,
                money: {},
            };
        },
        methods: {
            active(index) {
                this.current = index;
                if (index == 0) {
                    this.initEcharts1();
                }
                if (index == 1) {
                    this.initEcharts2();
                }
                if (index == 2) {
                    this.initEcharts3();
                }
            },
            // 跳转到账号中心
            toAccountSecurity() {
                this.$router.push({
                    name: "set-accountSecurity",
                });
            },
            // 跳转到实名认证
            toRealName() {
                this.$router.push({
                    name: "set-realName",
                });
            },
            // 跳转到充值
            toRecharge(val) {
                this.$router.push({
                    name: "finance-recharge",
                    query: { val },
                });
            },
            // 消费金额图表
            initEcharts1() {
                chartsHomeBusiness().then((res) => {
                    const echart = this.$echarts.init(document.getElementById('echartOne'))
                    const option = {
                        xAxis: {
                            type: res.echarts.xAxis[0].type,
                            data: res.echarts.xAxis[0].data,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: res.echarts.series[0].data,
                                type: res.echarts.series[0].type,
                            }
                        ]
                    }
                    echart.setOption(option);
                    window.addEventListener('resize', function () {
                        echart.resize();
                    })
                });
            },
            // 充值金额图表
            initEcharts2() {
                chartsHomeConsumption().then(res => {
                    console.log(res);
                    const echart = this.$echarts.init(document.getElementById('echartThree'))
                    const option = {
                        xAxis: {
                            type: res.echarts.xAxis[0].type,
                            data: res.echarts.xAxis[0].data,
                            axisTick: res.echarts.xAxis[0].axisTick,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: res.echarts.series[0].data,
                                type: res.echarts.series[0].type,
                            }
                        ]
                    }
                    echart.setOption(option);
                    window.addEventListener('resize', function () {
                        echart.resize();
                    })
                })
            },
            // 新增业务图表
            initEcharts3() {
                chartsHomeTopUp().then(res => {
                    console.log(res);
                    const echart = this.$echarts.init(document.getElementById('echartTwo'))
                    const option = {
                        xAxis: {
                            type: res.echarts.xAxis[0].type,
                            data: res.echarts.xAxis[0].data,
                            axisTick: res.echarts.xAxis[0].axisTick,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: res.echarts.series[0].data,
                                type: res.echarts.series[0].type,
                            }
                        ]
                    }
                    echart.setOption(option);
                    window.addEventListener('resize', function () {
                        echart.resize();
                    })
                })
            },
        },
        created() {
            memberInfo().then(res => {
                this.data = res
            })
            homeEntirety().then((res) => {
                this.moneyData = res;
                // console.log(this.moneyData);
            });
        },
        mounted() {
            this.initEcharts1();
            // this.initEcharts2();
            // this.initEcharts3();
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 20px;
    a {
      font-weight: 400;
      font-size: 14px;
    }
  }
  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 225px;
    height: 155px;
    margin-right: 20px;
    border-right: 1px solid #e0e0e0;
    .ivu-icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    .ivu-icon-ios-mail-outline:before,
    .ivu-icon-md-tablet-portrait:before,
    .ivu-icon-md-checkbox-outline:before {
      font-size: 20px;
    }
  }
  .account-right {
    flex: 1;
    .account-right-main {
      display: flex;
      margin-top: 20px;
      text-align: center;
      .account-right-main-li {
        p {
          color: #a3a3a3;
        }
        h3 {
          color: rgba(0, 0, 0, 0.85);
          margin: 10px 0;
          font-size: 28px;
          font-weight: 500;
        }
      }
      .fast-links-tag {
        a:not(:last-child) {
          margin-right: 8px;
        }
      }
      li {
        list-style: none;
        border-right: 1px solid #e0e0e0;
        width: 34.3%;
      }
    }
  }
  .activity {
    display: flex;
    .act-l-title {
      display: flex;
      flex: none;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 60px;
      margin-right: 16px;
      text-align: center;
      background-color: #08f;
      color: #fff;
      .act-l-title-inside {
        width: 56px;
        margin: 0 auto;
        line-height: 1.4;
      }
    }
    .act-r-title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .router-link-active {
        display: flex;
        align-items: center;
      }
    }
  }
  .official-announcements {
    display: flex;
    justify-content: space-between;
    list-style: none;
    a {
      color: #282828;
    }
    a:hover {
      color: #1890ff;
    }
  }
  .official-announcements:not(:last-child) {
    margin-bottom: 24px;
  }
  .shortcut {
    list-style: none;
    display: flex;
    justify-content: space-between;
    li {
      a {
        color: #282828;
      }
      a:hover {
        color: #1890ff;
      }
    }
  }
}
.overallData {
  padding-left: 24px;
  margin-top: 24px;
  .overallData-tabs {
    display: flex;
    .current {
      border-top: 4px solid #08f;
      border-bottom: none;
      background-color: white;
    }
    li {
      list-style: none;
      width: 33.33%;
      padding: 12px 24px 20px;
      background-color: #f7f8fa;
      border: 1px solid #e0e0e0;
      border-left: none;
      cursor: pointer;
    }
    li:first-child {
      border-left: 1px solid #e0e0e0;
    }
  }
}
.problem {
  padding-left: 24px;
  margin-top: 24px;
  .ivu-row {
    padding: 20px 24px 8px;
    background-color: rgba(255, 34, 0, 0.04);
    row-gap: 0;
    .ivu-col {
      margin-bottom: 16px;
      .problem-tag {
        position: relative;
        display: inline;
        padding: 0 8px 0 15px;
        color: #666;
        margin-right: 8px;
      }
      .problem-tag::before,
      .problem-tag::after {
        position: absolute;
        display: inline-block;
        top: 0;
        bottom: 0;
        margin: auto;
        content: "";
      }
      .problem-tag::before {
        height: 6px;
        width: 6px;
        left: 0;
        background-color: #858585;
        border-radius: 50%;
        margin-right: 8px;
      }
      .problem-tag::after {
        right: 0;
        width: 1px;
        height: 16px;
        background-color: #858585;
      }
      .problem-text {
        color: #282828;
      }
      .problem-text:hover {
        color: #1890ff;
      }
    }
  }
}
.ivu-avatar-icon {
  font-size: 60px;
  background-color: #08f;
}
.m-r-sm {
  margin-right: 8px;
  color: #282828;
  font-weight: 500;
}
.m-r-sm:hover {
  color: #08f;
}
</style>
